'use strict';
import React, {Component, PropTypes} from 'react';
//import {Router, Route, IndexRoute, hashHistory, browserHistory, Link} from 'react-router';
import Link from './Link'
import back from '../../img/icon/header_left.png'
import reason from '../../img/more/reason.png'
import {Toast} from '../../Http'

import Tool from '../../Tool'
/**
 * (加载动画)
 *
 * @class DataLoad
 * @extends {Component}
 */

export class R_header extends Component {

    constructor(props) {
        super(props);
        this.state = {
            search: true
        }
    }

    componentWillReceiveProps() {
        setTimeout(function () {
        }.bind(this), 0)
    }

    map() {
        if (localStorage.babylength == 0) {
            Toast.toast('请先添加设备')
            return;
        }
        //执行新方法
        if (this.props.addFn) {
            this.props.addFn();
            return;
        }
        if (!!this.props.map) {
            this.props.map.clearMap();
            this.context.router.goBack();
        } else {
            if(this.props.back2=='2'){
                this.context.router.push('/businessIndex');
            }else{
                this.context.router.goBack();
            }

        }
    }

    handlesearch() {
        this.props.handlesearch(this.state.search)
    }

    reason() {
        this.props.auSeason(true);
    }

    render() {
        const {title, left, right, map} = this.props;

        return (
            <header className='topheader'>
                {left == 1
                    ? <div className='back' onClick={this.map.bind(this)}>
                        <img src={back}/>
                    </div>
                    : !!map
                        ? <div className='back' onClick={this.map.bind(this)}>
                            <img src={back}/>
                        </div>
                        : <div className='back'></div>
                }
                <div className='ttitle'>{title}</div>
                <div className='end'>
                    {right == 1
                    ? <div className='end'>
                        <Link to="/Addarea/null/null/null/null/null/">添加</Link>
                    </div>
                    : right == 2
                    ? <div className='end' onClick={this.handlesearch.bind(this)}>
                        搜索
                    </div>
                    : right == 3
                    ? <div className='end' onClick={this.reason.bind(this)}>
                        <img src={reason} className="app-headerImg"/>
                    </div>
                    : right == 'spgl'
                    ? <div className='end' style={{color:'#187BFB',flex:'2'}}>
                        <Link to="/addGoods" >添加商品</Link>
                    </div>
                    : right == 'xfyz'
                    ? <div className='end' style={{color:'#187BFB',fontSize:"30px"}}>
                        <Link to="/numberVerify" >序列号</Link>
                    </div>
                    : ''
                    }</div>

            </header>
        )

    }
}

R_header.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export class R_header_fixed extends Component {

    constructor(props) {
        super(props)
        this.state = {
            flag: false,
            _flag: false
        }
    }

    componentWillReceiveProps() {
        setTimeout(function () {
        }.bind(this), 0)
    }

    map2() {
        if (this.props.newfn) {
            this.props.newfn(this)
            return;
        }
        if (this.props.app && this.props.app.toLocaleUpperCase() == 'APP') {
            location.href = '/appback';
            return;
        }
        if (localStorage.ischange == 1) {
            delete localStorage.ischange;
            this.context.router.push(`/map/${localStorage.appToken}/${localStorage.userid}`);
            return;
        }

        if (this.props.goto != undefined) {
            this.context.router.push(this.props.goto);
            return;
        }

        if (!!this.props.map) {
            this.props.map.map((json, index) => {
                json.clearMap()
            });
            this.context.router.goBack();
        } else {
            this.context.router.goBack();
        }

    }

    compare() {
        this.setState({flag: this.props.syncGuardian, _flag: this.props._flag});
        this.props.callbackParent(this.props.syncGuardian, this.props._flag);
    }

    render() {
        const {title, left, right, syncGuardian, _flag, noback} = this.props;
        return (
            <header className='topheader'>
                {left == 1 && !!syncGuardian && !!_flag
                    ? <div className='back' onClick={this.compare.bind(this)}>
                        <img src={back}/>
                    </div>
                    : <div className='back'>
                        {noback == 1 ? '' : <div className='back' onClick={this.map2.bind(this)}>
                            <img src={back}/>
                        </div>}
                    </div>
                }
                <div className='ttitle'>{title}</div>
                {right == 1
                    ? <div className='end' style={{
                        fontSize: '1.4rem'
                    }}>
                        <Link style={{
                            color: '#00b4ed'
                        }} to="/Addarea/null/null/null/null/null/">添加</Link>
                    </div>
                    : (right ? right : <div className='end'></div>)
                }

            </header>
        )

    }
}

R_header_fixed.contextTypes = {
    router: React.PropTypes.object.isRequired
};
